<template>
  <div :class="$style.wrap">
    <FormContainer :column="4">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
        <el-form-item prop="template" label="短信模板">
          <el-select v-model="formData.template" placeholder="请选择短信模板" remote :remote-method="postPage" clearable filterable @change="changeHandle">
            <el-option v-for="(tl,i) in templateList" :key="i" :label="tl.name" :value="tl.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="phone" label="手机号">
          <el-input v-model="formData.phone" number placeholder="请输入手机号" clearable></el-input>
        </el-form-item>
        <el-form-item prop="isTiming" label="是否定时发送">
          <el-select v-model="formData.isTiming" placeholder="请选择" clearable filterable>
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.isTiming===1" :required="formData.isTiming===1" error="请选择定时发送时间" prop="sendDate" label="定时发送时间">
          <el-date-picker v-model="formData.sendDate" operator="<" :limite="new Date()" type="datetime" />
        </el-form-item>
        <el-form-item prop="content" label="短信内容" :span="24">
          <el-input v-model="formData.content" type="textarea" :maxlength="150" tip :autosize="{minRows:3}" placeholder="短信内容" />
        </el-form-item>
        <el-form-item :span="24">
          <div class="button-container" style="padding-top:0">
            <Button type="primary" @click="submitHandle">发送</Button>
          </div>
        </el-form-item>
      </el-form>
    </FormContainer>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import { postPage } from '@/api/smsOrEmailTemp'
import { parseTime, filtersRaw, pageRequsetBody, deepCopy } from '@/utils'
import { mapGetters } from 'vuex'
import { postSmsCreat } from '@/api/sms'
import { notEmpty } from '@/utils'
export default {
  name: 'SMS',
  components: {
    FormContainer
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const validatorPhone = (r, v, c) => {
      if (/^1\d{10}$/.test(v)) {
        c()
      } else {
        c(new Error('请输入正确的手机号码！'))
      }
    }
    // const validatorSendDate = (r, v, c) => {
    //   if (this.formData.isTiming === 1) {
    //     if (v instanceof Date) {
    //       c()
    //     } else {
    //       c(new Error('请选择定时发送时间'))
    //     }
    //   } else {
    //     c()
    //   }
    // }
    // 验证发送时间
    const validatorTiming = (r, v, c) => {
      if (this.formData.isTiming === 1) {
        if (notEmpty(v)) {
          const t = v.getTime() - 30 * 60 * 1000
          const n = new Date().getTime()
          if (t < n) {
            c(new Error('定时发送时间距现在不能小于半小时！'))
          } else {
            c()
          }
        } else {
          c(new Error('请选择发送时间'))
        }
      } else {
        c()
      }
    }
    return {
      formData: {
        template: '',
        phone: '',
        isTiming: 0,
        sendDate: '',
        content: ''
      },
      formRules: {
        phone: [{ required: true, message: '请输入手机号码', trigger: 'change' },
          { required: true, validator: validatorPhone, trigger: 'change' }],
        sendDate: [{ validator: validatorTiming, trigger: 'change' }],
        content: [{ required: true, message: '请输入短信内容', trigger: 'change' }]
      },
      templateList: []
    }
  },
  created() {
    this.postPage('')
  },
  computed: {
    ...mapGetters(['groupList'])
  },
  methods: {
    // 获取sms模板
    postPage(v) {
      const data = {
        filtersRaw: [
          filtersRaw('type', 1, '='),
          filtersRaw('name', v, 'like'),
          filtersRaw('enabled', 1, '='),
          filtersRaw('group', this.groupList.map(e => e.groupNo).join(','), 'in')
        ]
      }
      postPage(pageRequsetBody(data)).then(res => {
        this.templateList = res.data.records
      })
    },
    // 选择短信模板后，更新短信输入框内容
    changeHandle(id) {
      let t = Object.create(null)
      for (let i = 0; this.templateList.length > i; i++) {
        if (this.templateList[i].id === id) {
          t = this.templateList[i]
          break
        }
      }
      this.$set(this.formData, 'content', t.content || '')
    },
    submitHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        if (this.formData.isTiming === 1) {
          data.sendDate = parseTime(data.sendDate)
        } else {
          delete data.sendDate
        }
        data.businessCode = this.info.taskCode
        data.businessType = 2
        return postSmsCreat(data).then(res => {
          this.$message.success('短信发送成功！')
        })
      })
    }
  }
}
</script>
<style lang='scss' module>
.wrap{

}
</style>
